<template>
  <!-- formlayout 使用 -->
  <f-form-layout :model="model" ref="form" :columns="columns"></f-form-layout>
  <f-button @click="submit">提交</f-button>
  <f-button @click="reset">重置</f-button>
  <pre>{{ json }}</pre>

  <f-form-edit-list
    v-model:value="value"
    ref="list"
    :min="3"
    :max="10"
    :validateOnAdd="false"
    layout="vertical"
    :initItemData="() => ({ object: { a1: '', a2: '' } })"
    :columns="columns[4].props?.columns"
    @change="handleChange"
    @itemChange="handleItemChange"
  ></f-form-edit-list>

  <f-button @click="submitByList">提交</f-button>
  <f-button @click="resetByList">重置</f-button>
  <f-button @click="submitByForm">提交第二行表单</f-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const form = ref();
const value = ref();
const list = ref();
const model = ref({
  // list: [
  //   {
  //     id: "1",
  //     disabled: true,
  //     type: 1,
  //     go: 2,
  //     object: { a1: "object-a1", a2: "object-a2" },
  //   },
  //   {
  //     id: "2",
  //     disabled: false,
  //     type: 222,
  //     go: 222,
  //     object: { a1: "object-a1", a2: "object-a2" },
  //   },
  // ],
});
const json = ref("");
const columns = ref([
  { required: true, label: "字段1", field: "f1", span: 24 },
  { required: true, label: "字段2", field: "f2", span: 24 },
  { required: true, label: "字段3", field: "f3", span: 24 },
  { required: true, label: "字段4", field: "f4", span: 24 },
  {
    label: "List",
    field: "list",
    type: "form-edit-list",
    span: 24,
    required: true,
    props: {
      rowKey: "id",
      showLabel: true,
      useAdd: true,
      useRemove: true,
      // 对于已经存在的数据，例如编辑可以根据当前行数据进行是否禁用整行
      // 可以通过column中的disabled 进行覆盖
      disabled: (item) => item.disabled,
      // 默认初始数据行数
      min: 3,
      max: 5,
      initItemData: () => ({
        object: { a1: "", a2: "" },
      }),
      onItemChange: (args) => {
        console.log(args);
      },
      columns: [
        {
          required: true,
          label: "item-1",
          field: "object.a1",
          span: 6,
          props: (data) => ({
            disabled: data.id == "2",
          }),
        },
        { required: true, label: "item-2", field: "object.a2", span: 6 },
        { required: true, label: "item-3", field: "type", span: 6 },
        { required: true, label: "item-4", field: "go", span: 6 },
      ],
    },
  },
]);
function submit() {
  form.value.validate().then((res) => {
    json.value = JSON.stringify(res, null, 4);
  });
}

function reset() {
  form.value.resetFields();
}
function handleChange(value) {
  console.log("list change:", value);
}
function handleItemChange({ field, value, index, data }) {
  console.log(`list item ${index} change`, "field:", field, "value:", value);
}
function submitByList() {
  list.value.validate().then((res) => {
    console.log(res);
  });
}
function resetByList() {
  list.value.resetFields();
}
function submitByForm() {
  list.value.getForms()[1].validate();
}
</script>
